// import { useHistory } from "react-router-dom";
// import { NavLink } from "react-router-dom";
import { useEffect } from "react";
import { useNavigate, useLocation } from "react-router-dom";
// import { fetchPost } from "@/request/testAPI";
import Logo from "@/assets/logo.png";

import styles from "./index.module.less";

const NavList = [
  {
    name: "首页",
    path: "/home",
  },
  {
    name: "查询余额",
    path: "/queryCard",
  },
  {
    name: "查询餐厅",
    path: "/queryShop",
  },
  {
    name: "企业购卡片",
    path: "/corpGuide",
  },
  {
    name: "无卡消费攻略",
    path: "/guide",
  },
];

const Navbar = () => {
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    console.log("location", location);
  }, [location]);

  // const clickLogin = async () => {
  //   const res = await fetchPost({
  //     username: "lipan",
  //     pwd: "1234qwer",
  //   });
  //   console.log("登录返回", res);
  // };

  return (
    <div className={styles["navbar"]}>
      <div className={styles["navbar-left-right"]}>
        <img
          className={styles["navbar-left"]}
          // onClick={() => {
          //   clickLogin();
          // }}
          src={Logo}
          alt="心意美食卡"
        />
        <div className={styles["navbar-right"]}>
          {NavList.map((item) => {
            return (
              <div
                className={`${styles["navbar-item"]} ${
                  location.pathname.includes(item.path) &&
                  styles["navbar-active"]
                }`}
                key={item.name}
                onClick={() => {
                  navigate(item.path); // 跳转到指定路径
                }}
              >
                {item.name}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default Navbar;
